<template>
  <up-popup :show="show" round="24rpx" mode="bottom" closeable @close="close">
    <view class="popup-list">
      <view class="popup-title">支付订单</view>
      <view class="popup-nav">
        <view class="popup-content">
          <view class="content-price">
            <view class="price-num">
              {{price}}<view style="font-size: 48rpx;">金币</view>
            </view>
            <!--            <view class="price-label">支付剩余时间 <view style="margin-left: 16rpx;">14:23:21</view>
            </view> -->
          </view>
          <view class="content-nav" v-if="payList.length">
            <view class="nav-title">
              <view class="title-name">请选择支付方式</view>
            </view>
            <view class="content-pay">
              <up-radio-group v-model="payRadio" placement="row" iconPlacement="right">
                <view class="pay-nav" v-for="(item, index) in payList" :key="index" @click="groupChange(item)">
                  <image :src="item.icon" mode="" class="pay-icon"></image>
                  <view class="pay-content">
                    <view class="pay-name">{{item.name}}</view>
                    <up-radio activeColor="#A4682F" :name="item.name">
                    </up-radio>
                  </view>
                </view>
              </up-radio-group>
            </view>
          </view>
        </view>
        <view class="popup-btn">
          <up-button text="立即支付" shape="circle" color="#A4682F" @click="torelease"></up-button>
        </view>
      </view>
    </view>
  </up-popup>
</template>

<script setup>
  import {
    submitPay,
    coinsPay
  } from './api.js'
  import {
    ref,
    reactive,
    defineProps,
    defineEmits
  } from 'vue'
  import {
    onShow,
    onLoad
  } from '@dcloudio/uni-app'
  const {
    show,
    price,
    taskId
  } = defineProps(['show', 'price', "taskId"])
  const emit = defineEmits(['showClose', 'release'])
  const showPopup = ref()
  const payRadio = ref('支付宝');
  const activePay = ref({
    name: '支付宝',
    icon: '/static/my/icon/zfb.png',
    type: 'alipay',
    id: 1
  })
  const payList = ref([{
    name: '支付宝',
    icon: '/static/my/icon/zfb.png',
    type: 'alipay',
    id: 1
  }])
  onLoad(() => {
    if (uni.getSystemInfoSync().platform === 'ios') {
      payList.value = []
      activePay.value = [{
        name: '余额',
        type: 'apple',
        id: 1
      }]
      payRadio.value = "余额"
    } else {
      payList.value = [{
        name: '支付宝',
        icon: '/static/my/icon/zfb.png',
        type: 'alipay',
        id: 1
      }]
    }

  })

  function groupChange(val) {
    activePay.value = val
    payRadio.value = val.name
  }

  function close() {
    emit('showClose', false)
  }
  const torelease = (async () => {
    if (uni.getSystemInfoSync().platform === 'ios') {
      coinsPayApi(taskId)
      return
    }
    const res = await submitPay({
      task_id: taskId,
      amount: +price,
      method: 'app',
      type: activePay.value.type
    })
    if (res && res.code == 1) {
      if (activePay.value.type === 'alipay') {
        uni.requestPayment({
          provider: activePay.value.type,
          orderInfo: res.data,
          success(res) {
            uni.showToast({
              title: '支付成功',
              icon: 'none'
            })
            emit('release', false)
            uni.redirectTo({
              url: `/pages/index/paymentResultsPage?price=${price}&payType=${activePay.value.name}&taskId=${taskId}`
            })
          },
          fail(err) {
            console.log(444, err);
            uni.showToast({
              title: '支付失败',
              icon: 'none'
            })
          }
        })
      } else {
        const wxData = JSON.parse(res.data)
        uni.requestPayment({
          provider: activePay.value.type,
          orderInfo: {
            appid: wxData.appid, // 微信开放平台 - 应用 - AppId，
            noncestr: wxData.noncestr, // 随机字符串
            package: wxData.package, // 固定值
            partnerid: wxData.partnerid, // 微信支付商户号
            prepayid: wxData.prepayid, // 统一下单订单号 
            timestamp: wxData.timestamp, // 时间戳（单位：秒）
            sign: wxData.sign // 签名，这里用的 MD5/RSA 签名
          },
          success(res) {
            console.log('微信支付成功', res);
            uni.showToast({
              title: '支付成功',
              icon: 'none'
            })
            emit('release', false)
            uni.redirectTo({
              url: `/pages/index/paymentResultsPage?price=${price}&payType=${activePay.value.name}&taskId=${taskId}`
            })
          },
          fail(err) {
            console.log('微信支付失败', err);
            if (err.errCode == '-8') {
              uni.showModal({
                content: "客户端未安装",
                showCancel: false
              });
            } else {
              uni.showToast({
                title: '支付失败',
                icon: 'none'
              })
            }
          }
        })

      }
    }
  })
  const coinsPayApi = (async (taskId) => {
    const res = await coinsPay({
      task_id: taskId
    })
    if (res && res.code === 1) {
      uni.showToast({
        title: '支付成功',
        icon: 'none'
      })
      emit('release', false)
      uni.redirectTo({
        url: `/pages/index/paymentResultsPage?price=${price}&payType=余额&taskId=${taskId}`
      })
    } else {
      uni.showToast({
        title: '支付失败',
        icon: 'none'
      })
    }
  })
</script>

<style lang="scss" scoped>
  .popup-list {
    width: 100vw;
    opacity: 1;
    display: flex;
    flex-direction: column;

    .popup-title {
      width: 100%;
      height: 88rpx;
      font-size: 32rpx;
      font-weight: 500;
      line-height: 88rpx;
      color: rgba(51, 51, 51, 1);
      text-align: center;
      border-bottom: 2rpx solid #EBEBEB;
    }

    .popup-nav {
      width: 100%;
      display: flex;
      flex-direction: column;

      .popup-content {
        height: 640rpx;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        box-sizing: border-box;
        padding: 0 30rpx;

        .content-price {
          height: 272rpx;
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          .price-num {
            display: flex;
            align-items: baseline;
            font-size: 80rpx;
            font-weight: 400;
            color: #333333;

          }

          .price-label {
            margin-top: 16rpx;
            display: flex;
            align-items: center;
            font-size: 26rpx;
            font-weight: 400;
            color: #666666;

          }
        }

        .content-nav {
          width: 100%;

          .nav-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;

            .title-name {
              font-size: 28rpx;
              font-weight: 500;
              color: rgba(51, 51, 51, 1);

            }
          }

          .content-pay {
            display: flex;
            flex-direction: column;

            .pay-nav {
              width: 100%;
              display: flex;
              height: 108rpx;
              align-items: center;
              border-radius: 20rpx;
              box-sizing: border-box;
              margin-top: 20rpx;

              .pay-content {
                width: 100%;
                border-top: 2rpx solid #EBEBEB;
                display: flex;
                height: 108rpx;
                align-items: center;
                box-sizing: border-box;
                padding-right: 16rpx;

              }

              .pay-icon {
                height: 48rpx;
                width: 48rpx;
                margin-right: 20rpx;
                border-radius: 8rpx;
              }

              .pay-name {
                flex: 1;
                font-size: 28rpx;
                font-weight: 400;
                color: rgba(51, 51, 51, 1);

              }

            }

            .pay-nav:first-child .pay-content {
              border: none;
            }

          }

        }
      }

      .popup-btn {
        width: 100%;
        height: 112rpx;
        box-shadow: 0rpx -2rpx 16rpx rgba(0, 0, 0, 0.06);
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 0 30rpx;
      }
    }
  }
</style>